<template>
    <div>
        <!--轮播图区域-->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="img in imgsList" :key="img.id">
                <img :src="img.img" :alt="img.url">
            </mt-swipe-item>
        </mt-swipe>

        <!--六宫格-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"
                v-for="(menu,i) in mainMenu" :key="i">
                <router-link :to="menu.url">
                    <img :src="require('../../images/' + menu.img)" alt=""> <!--引入图片记得使用require-->
                    <div class="mui-media-body" v-text="menu.name"></div>
                </router-link>
            </li>
        </ul>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui' //Toast模块
    export default {
        data() {
            return {
                imgsList: [], //保存轮播图数据
                mainMenu: [ //六宫格的内容
                    {url: '/home/newlist', img: 'menu1.png', name: '新闻资讯'},
                    {url: '#', img: 'menu2.png', name: '图片分享'},
                    {url: '#', img: 'menu3.png', name: '商品购买'},
                    {url: '#', img: 'menu4.png', name: '留言反馈'},
                    {url: '#', img: 'menu5.png', name: '视频分区'},
                    {url: '#', img: 'menu6.png', name: '关于我们'}
                ]
            }
        },
        created() {
            this.getImgs()
        },
        methods: {
            getImgs() { //获得轮播图图片
                this.$http.get('api/getlunbo').then(res => {
                    if (res.body.status === 0) { //获取成功
                        this.imgsList = res.body.message
                    } else { //获取失败
                        Toast('获取轮播图片失败！')
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .mint-swipe {
        height: 200px;

        .mint-swipe-item {
            &:nth-child(1) {
                background-color: lightgreen;
            }

            &:nth-child(2) {
                background-color: lightblue;
            }

            &:nth-child(3) {
                background-color: lightsalmon;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .mui-grid-view.mui-grid-9 {
        background-color: #fff;

        img {
            width: 60px;
            height: 60px;
        }

        .mui-media-body {
            font-size: 15px;
        }
    }
</style>